<template>
  <div class="msite">
    <!-- header 部分 -->
    <div class="van-bar">
      <!-- 顶部 -->
      <van-nav-bar>
        <template #left>
          <van-icon name="location" size="24" />
        </template>
        <template #title>
          <i class="title">{{ address.name }}</i>
        </template>
        <template #right>
          <router-link :to="!userInfo._id ? '/login' : '/userinfo'">
            <van-icon v-if="userInfo._id" name="user-o" size="24" />
            <i v-else class="right_login">登陆|注册</i>
          </router-link>
        </template>
      </van-nav-bar>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        shape="round"
        background="#1989fa"
        placeholder="请输入搜索关键词"
      />
    </div>
    <!--首页导航轮播-->
    <nav class="msite_nav">
      <div class="swiper-container" v-if="categorys.length">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(categorys,index) in categorysArr" :key="index">
            <a href="javascript:" class="link_to_food" v-for="(item,index) in categorys" :key="index">
              <div class="food_container">
                <img :src="baseImageUrl+item.image_url" />
              </div>
              <span>{{item.title}}</span>
            </a>
            <!--下面的图片省略-->
          </div>
        </div>
        <!-- 轮播图页码 -->
        <div class="swiper-pagination"></div>
      </div>
      <img src="./images/msite_back.svg" alt="back" v-else>
    </nav>
    <van-notice-bar left-icon="volume-o" text="热门活动...." />
    <div class="nearby_shop"><span class="shop_tab"><van-icon name="shop-o" /> 附近商家</span></div>
    <shopList></shopList>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ShopList from '@/components/ShopList/ShopList'
import Swiper from 'swiper'
// 同时引入swiper的 css文件
import 'swiper/swiper-bundle.min.css'
export default {
  data () {
    return {
      value: '',
      baseImageUrl: 'https://fuss10.elemecdn.com'
    }
  },
  // 注意要在页面加载完成之后（mounted）再进行swiper的初始化
  mounted () {
    // 调用 getShops 方法 请求数据
    this.$store.dispatch('getShops')
  },
  computed: {
    ...mapState(['address', 'categorys', 'userInfo']),
    /*
    根据categorys一维数组生成一个2维数组
    小数组中的元素个数最大是8
    */
    categorysArr () {
      // 1.先从当前组件中得到所有食品分类的一维数组
      const { categorys } = this
      // 2.准备一个空的二维数组--categorysArr
      const arr = []
      // 3.准备一个小数组--pages(最大长度为8)
      let minArr = []
      // 4.遍历categorys得到处理后的二维数组catagorysArr
      categorys.forEach((data) => {
        // 如果当前小数组(pages)已经满了, 创建一个新的
        if (minArr.length === 8) {
          minArr = []
        }
        // 如果minArr是空的, 将小数组(pages)保存到大数组(categorysArr)中
        if (minArr.length === 0) {
          arr.push(minArr)
        }
        // 将当前分类信息保存到小数组(pages)中
        minArr.push(data)
      })
      return arr
    }
  },
  watch: {
    categorys (value) { // categorys数组中有数据了，在异步更新界面之前执行
    // setTimeoout 可以实现 但不是最好的
      // setTimeout(() => {
      //   // 创建一个swiper实例来实现轮播
      //   // eslint-disable-next-line no-new
      //   new Swiper('.swiper-container', {
      //     autoplay: true,
      //     // 如果需要分页器
      //     pagination: {
      //       el: '.swiper-pagination',
      //       clickable: true
      //     }
      //   })
      // }, 500)
      // 界面更新就立即创建swiper对象
      this.$nextTick(() => { // 一旦完成页面更新 立即调用 (词条语句要写在数据更新之后)
        // 创建一个swiper实例来实现轮播
        // eslint-disable-next-line no-new
        new Swiper('.swiper-container', {
          loop: true,
          autoplay: true,
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        })
      })
    }
  },
  methods: {
    onClickLeft () {},
    onClickRight () {}
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    shopList: ShopList
  }
}
</script>

<style lang="less" scoped>
.msite_nav {
  font-size: 13px;
  border-bottom: 1px solid #e4e4e4;
  margin-top: 10px;
  height: 200px;
  background: #fff;
  .swiper-container {
    width: 100%;
    height: 100%;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        .link_to_food {
          width: 25%;
          text-align: center;
          .food_container {
            display: block;
            width: 100%;
            padding-bottom: 10px;
            img {
              display: inline-block;
              width: 50px;
              height: 50px;
            }
            span {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 13px;
              color: #666;
            }
          }
        }
      }
    }
  }
  .swiper-pagination {
    .swiper-pagination-bullet-active {
      background: #1989fa;
    }
  }
}
.nearby_shop{
  margin: 10px 0;
}
.shop_tab {
  margin-left: 10px;
  font-size: 18px;
}

.van-nav-bar {
  .title {
    color: #fff;
    font-weight: 600;
    font-size: 22px;
     white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 220px;
    display: inline-block;
  }
  .van-icon {
    color: #fff;
  }
  .right_login{
    color: #fff;
    font-size: 16px;
  }
  background-color: #1989fa;
}
</style>
